<template>
	<!-- jurisdiction人员权限 -->
	<view class="j_wp">
		<image src="/static/index/bg.png" class="bg"></image>
		<image src="/static/group/rygl.png" class="bg1"></image>
		<view class="info">
			<view class="left">
				<view class="tit">{{info.name}}</view>
				<view class="tips">
					<view>{{info.isman}}</view>
					<view>{{info.supname}}</view>
				</view>
			</view>
			<view class="right">
				<image :src="info.logo"></image>
			</view>
			<view class="phone">电话：{{info.mobile}}</view>
		</view>
		<view class="J_Range">
			<text class="name">权限范围：</text>
			<radio-group class="j_r_radio-group" @change="radioChange">
				<label class="j_r_label" v-for="(item, index) in RangeList" :key="item.value">
					<radio class="j_checkbox" color="#8405dc" :value="item.value" :checked="index == range" />
					{{item.name}}
				</label>
			</radio-group>
		</view>
		<checkbox-group @change="checkboxChange" class="check">
			<label class="j_label" v-for="item in plist" :key="item.value">
				<view class="j_item">
					<checkbox class="j_checkbox" activeBackgroundColor="#8615E1" iconColor="#fff" :value="item.value" :checked="item.checked" />{{item.name}}
				</view>
			</label>
		</checkbox-group>
		<view class="j_submit" @click="onsumbit">
			<view>修改权限</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',
				mid: '',
				info: [],
				my: [],
				plist: [],

				range: '0',
				RangeList: [{
						value: '0',
						name: '本店'
					},
					{
						value: '1',
						name: '所有店铺'
					}
				]
			}
		},
		onLoad(option) {
			this.uid = option.uid;
			this.mid = option.id;
			this.getPowe();
		},
		methods: {
			getPowe() {
				this.$axios('groupManager/myPower', 'POST', 'supplier', {
					mid: this.mid
				}).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						this.info = data.info;
						this.my = data.my;
						this.range = data.range;
						this.plist = data.plist.map(v => {
							v.checked = false;
							for (let i in data.my) {
								if (data.my[i] == v.id) {
									v.checked = true;
									break;
								}
							}
							return {
								value: v.id,
								name: v.name,
								checked: v.checked
							};
						})
					}
				})
			},
			onsumbit() {
				var that = this;
				that.my.push("13");
				that.my.push("14");
				console.log(that.my);
				// return;
				uni.showModal({
					title: '提示',
					content: '确认提交？',
					success(e) {
						if (e.confirm) {
							that.$axios('groupManager/savePower', 'POST', 'supplier', {
								range: that.range,
								powers: that.my,
								mid: that.mid
							}).then(res => {
								if (res.data.code == 200) {
									that.$api.msg(res.data.data);
									setTimeout(() => {
										that.$navRed(
											'/pages/groupmenu/personnellist?isback=1&uid=' +
											that.uid)
									}, 500)
								}
							})
						}
					}
				})

			},
			radioChange(e) {
				this.range = e.detail.value;
			},
			checkboxChange(e) {
				this.my = e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FBF8FE;
		padding-bottom: 130upx;
	}
	.bg{
		width: 100%;
		height: 330rpx;
	}
	.bg1{
		width: 694rpx;
		display: block;
		margin: 0 auto;
		margin-top: -312rpx;
		position: relative;
		height: 330rpx;
	}
	.info{
		width: 694rpx;
		height: 330rpx;
		margin: 0 auto;
		margin-top: -312rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 60rpx 60rpx;
		.left{
			font-size: 24rpx;
			color: #999999;
			.tit{
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}
			.tips{
				margin-top: 20rpx;
				line-height: 44rpx;
			}
		}
		.right{
			width: 132rpx;
			height: 132rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 12rpx 0rpx #E6CEF9;
			border-radius: 50%;
			overflow: hidden;
			border: 6rpx solid #fff;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.phone{
			position: absolute;
			bottom: 44rpx;
			left: 60rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	.J_Range{
		margin-top: -20rpx;
		justify-content: space-between;
	}
	.j_item,
	.J_Range,
	.j_r_radio-group {
		.name{
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		display: flex;
		align-items: center;
		padding: 20rpx 4%;
	}
	.check{
		display: flex;
		flex-wrap: wrap;
		width: 92%;
		background: #fff;
		margin: 0 auto;
		border-radius: 12rpx;
		padding: 20rpx 0;
		justify-content: space-between;
		.j_label{
			width: 44%;
			margin-left: 6%;
		}
	}
	.j_checkbox {
		transform: scale(0.8);
	}

	.j_r_radio-group {
		padding: 0;
	}

	.j_r_label {
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}

	.j_submit {
		width: 100%;
		height: 148rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 22rpx 0rpx #F3E8FC;
		position: fixed;
		bottom: 0;
		view{
			margin: 20rpx auto;
			width: 396rpx;
			height: 74rpx;
			background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
			border-radius: 38rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 74rpx;
			text-align: center;
		}
	}
</style>
